<template>
    <div class="page">
        <a-form class="form" @submit="pageChange(1)">
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="pageChange(1)" type="primary">查询</a-button>
        </a-form>

        <div class="page_content flex-column">
            <div class="table_tool mar-b10">
                <lo-button size="small" type="primary" color="success" @click="editMerFn('open')">+新增商户</lo-button>
            </div>
            <div class="flex-1">
                <table-container v-slot="{containerHeight}">
                    <lo-table
                        :columns="tableColmun"
                        :dataSource="tableData"
                        highlightCurrent
                        @currentRow="onCurrentRow"
                        :height="containerHeight">
                        <template #bodyCell="{column, record}">
                            <template v-if="column.dataIndex == 'op'">
                                <!-- 商户不能更改，更改逻辑写了一些，不完善的 -->
                                <!-- <lo-button @click="editMerFn('open', record)" size="small" color="primary">编辑</lo-button> -->
                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination
                    @change="pageChange"
                    v-model:current="tablePager.index"
                    :pageSize="tablePager.size"
                    :total="tablePager.total"
                    :showSizeChanger="false"/>
            </div>
        </div>
        <lo-modal
            title="新增/修改商户"
            width="800px"
            ref="editMerRef" @confirm="editMerFn('confirm')">
            <div class="edit_mer">
                <a-form :label-col="{style: { width: '100px' }}">
                    <a-form-item v-if="merItem.id" label="商户编号：">
                        <a-input v-model:value="merItem.merNo" placeholder="商户编号" />
                    </a-form-item>
                    <a-form-item label="账号：">
                        <a-input v-model:value="merItem.userAccount" placeholder="账号" :disabled="!!merItem.id" />
                    </a-form-item>
                    <a-form-item v-if="!merItem.id" label="密码：">
                        <a-input v-model:value="merItem.userPwd" placeholder="密码" />
                    </a-form-item>
                    <a-form-item label="角色：">
                        <lo-select
                        v-if="!merItem.id"
                            v-model:value="merItem.roleId"
                            :options="roleList"
                            placeholder="选择角色" noborder></lo-select>
                        <a-input v-else v-model:value="merItem.roleName" placeholder="角色" disabled />
                    </a-form-item>

                    <a-form-item label="商户名称：">
                        <a-input v-model:value="merItem.merName" placeholder="商户名称" />
                    </a-form-item>
                    <a-form-item label="简称：">
                        <a-input v-model:value="merItem.simpleName" placeholder="简称" />
                    </a-form-item>


                    <a-form-item label="费率：">
                        <a-input v-model:value="merItem.baseRate" placeholder="简称" />
                    </a-form-item>
                    <a-form-item label="sbBrand：">
                        <a-input v-model:value="merItem.sbBrand" placeholder="sbBrand" />
                    </a-form-item>
                    <a-form-item label="sbInstNo：">
                        <a-input v-model:value="merItem.sbInstNo" placeholder="sbInstNo" />
                    </a-form-item>
                    <a-form-item label="联系人：">
                        <a-input v-model:value="merItem.concatName" placeholder="联系人" />
                    </a-form-item>
                    <a-form-item label="联系电话：">
                        <a-input v-model:value="merItem.concatPhone" placeholder="联系电话" />
                    </a-form-item>
                    <a-form-item label="省市区：">
                        <Cascader v-model:value="cityValue" :options="cityList" placeholder="请选择省市区" />
                    </a-form-item>
                    <a-form-item label="详细地址：">
                        <a-textarea v-model:value="merItem.address" placeholder="详细地址" />
                    </a-form-item>
                    <a-form-item label="备注：">
                        <a-textarea v-model:value="merItem.remark" placeholder="备注" />
                    </a-form-item>
                </a-form>
            </div>
        </lo-modal>
        <!-- <third ref="thirdRef"></third> -->
    </div>
</template>

<script lang="jsx" setup>
    import { ref, onMounted, computed } from 'vue'
    import { getAllMers, getChannelMers, createChannelMer, createNormalMer, getSysRoles } from '@/api/system'
    import { Cascader } from 'ant-design-vue'
    import { useRoute } from 'vue-router'
    import city from '@/utils/citys'
    import md5 from 'js-md5'

    const Route = useRoute()
    const pageType = computed(() => {
        if( Route.path == '/system/merList' ) {
            return 'normalMer'
        } else if(Route.path == '/system/merList_channel') {
            return 'channelMer'
        }
    })
    onMounted(() => {
        getMerList()
    })

    // **************列表***************
    const tableQuery = ref({
        keyWord: ''
    })
    const tableColmun = ref([
        { title: '序号', type: 'index' },
        { title: '账号', dataIndex: 'FUserAccount', },
        { title: '商户名称', dataIndex: 'FMerName', },
        { title: '商户号', dataIndex: 'FMerNo', },
        { title: '简称', dataIndex: 'FSimpleName', },

        { title: '角色', dataIndex: 'initRoleName', width: '150px' },
        { title: '联系人', dataIndex: 'FConcatName', width: '100px' },
        { title: '联系电话', dataIndex: 'FConcatPhone', width: '120px' },
        // { title: '操作', dataIndex: 'op', align: 'center', width: '100px' },
    ])
    const tableData = ref([])
    const tablePager = ref({
        index: 1,
        total: 0,
        size: 30
    })
    function pageChange(e) {
        tablePager.value.index = e
        getMerList()
    }
    function getMerList() {
        if(pageType.value == 'normalMer') {
            getAllMers({
                keyWord: tableQuery.value.keyWord,
                pageIndex: tablePager.value.index,
                pageSize: tablePager.value.size
            }).then(res => {
                tableData.value = res.data.list
                tablePager.value.total = +res.data.total
            })
        }
        if(pageType.value == 'channelMer') {
            getChannelMers({
                keyWord: tableQuery.value.keyWord,
                pageIndex: tablePager.value.index,
                pageSize: tablePager.value.size
            }).then(res => {
                tableData.value = res.data.list
                tablePager.value.total = 0
            })
        }

    }

    function onCurrentRow(e) {
        console.log(e);
    }

    // ************编辑*******************
    const editMerRef = ref(null)
    const MER_ITEM = {
        id: '',
        merName: '', //商户名
        simpleName: '', //简称
        concatPhone: '', //联系手机
        concatName: '', //联系人
        province: '',
        city: '',
        district: '',
        address: '',
        remark: '',
        sbBrand: '',
        sbInstNo: '',
        baseRate: '', //费率
        // 下面这些是新建的时候才有
        merNo: '',
        roleId: void 0,
        userAccount: '',
        userPwd: '',
    }
    const cityValue = ref([])
    const cityList = ref(city)
    const merItem = ref({ ...MER_ITEM })
    function editMerFn(type, row) {
        if(type == 'open') {
            editMerRef.value.open()
            console.log(row);
            if(row) {
                merItem.value = {
                    id: row.FId,
                    merName: row.FMerName,
                    merNo: row.FMerNo,
                    simpleName: row.FSimpleName,
                    concatPhone: row.FConcatPhone,
                    concatName: row.FConcatName,
                    province: row.FProvince,
                    city: row.FCity,
                    district: row.FDistrict,
                    address: row.FAddress,
                    remark: row.FRemark,
                    sbBrand: row.FSbBrand,
                    sbInstNo: row.FSbInstNo,
                    baseRate: row.FBaseRate,
                    roleName: row.FRoleName,
                    userAccount: row.FUserAccount,
                }
                if(row.province) {
                    cityValue.value = [
                        row.FProvince,
                        row.FCity,
                        row.FDistrict,
                    ]
                } else {
                    cityValue.value = []
                }
            } else {
                merItem.value = { ...MER_ITEM }
                cityValue.value = []
            }
            getRoleList()
        } else if(type == 'cancel') {
            editMerRef.value.close()
        } else if(type == 'confirm') {
            let data = {
                id: merItem.value.id,
                merName: merItem.value.merName, //商户名
                simpleName: merItem.value.simpleName, //简称
                labelCode: merItem.value.labelCode, //代码
                concatPhone: merItem.value.concatPhone, //联系手机
                concatName: merItem.value.concatName, //联系人
                province: cityValue.value[0],
                city: cityValue.value[1],
                district: cityValue.value[2],
                address: merItem.value.address,
                remark: merItem.value.remark,
                sbBrand: merItem.value.sbBrand,
                sbInstNo: merItem.value.sbInstNo,
                baseRate: merItem.value.baseRate, //费率
            }
            if(!data.id) {
                data.userAccount = merItem.value.userAccount
                data.merNo = merItem.value.merNo
                data.roleId = merItem.value.roleId
                data.userPwd = md5(merItem.value.userPwd)
            }

            let apiFn;
            if (pageType.value == 'normalMer') {
                apiFn = createNormalMer
            }
            if (pageType.value == 'channelMer') {
                apiFn = createChannelMer

            }
            apiFn(data).then(res => {
                $global.message.success(res.msg)
                getMerList()
                editMerFn('cancel')
            })
        }
    }
    const roleList = ref([])
    function getRoleList() {
        getSysRoles().then(res => {
            let list = res.data && res.data.map(i => ({
                label: i.roleName,
                value: i.id,
            }))
            roleList.value = list
        })
    }


    // const thirdRef = ref(null)
    // function openThirdFn(item) {
    //     thirdRef.value.open(item)
    // }
</script>

<style lang="less" scoped>

.edit_mer{
    .ant-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            width: 365px;
            margin-right: 20px;
            &:nth-child(2n) {
                margin-right: 0;
            }
        }
    }

}

</style>
